<template>
  <div>
    <div class="card-item-title">
      <div class="card-icon-box mr-md">
        <div
          class="iconfont iconjieshaoxinxi"
          style="color: #fff; font-size: 8px"
        ></div>
      </div>
      <div>个人简介</div>
    </div>
    <div class="intro-box">
      <div class="flex-y-center pt-lg" v-if="voice">
        <img class="avatar sm radius-15" :src="avatar" />
        <div>
          <div
            class="
              audio-record-sec
              ml-lg
              fill-body
              radius-15
              flex-y-center
              f-caption
              c-caption
            "
          >
            <img
              class="play-img ml-md"
              :src="playVoice ? play_ing : play_stop"
            />
          </div>
        </div>
        <div class="flex-center flex-column ml-md">
          <div class="point mt-sm"></div>
          <div class="c-caption mt-sm">{{ voice_time }}</div>
        </div>
      </div>
      <div class="mt-md" style="word-break: break-all">{{ desc }}</div>
      <div class="tag-list" v-if="tag_list.length > 0">
        <block v-for="(item, index) in tag_list" :key="index">
          <div
            class="tag-item rel"
            :style="{
              color: item.thumbed == 1 ? primaryColor : '',
              borderColor: item.thumbed == 1 ? primaryColor : ''
            }"
          >
            <div
              class="iconfont mr-sm"
              :class="[
                { 'iconlike-b': item.thumbed == 1 },
                { iconlike: item.thumbed != 1 }
              ]"
            ></div>
            <div class="f-caption">{{ item.tag }} {{ item.count }}</div>
          </div>
        </block>
      </div>
    </div>
    <div class="space-md"></div>
  </div>
</template>

<script>
export default {
  name: 'staffIntroduce',
  props: {
    o: Object
  },
  data () {
    return {
      primaryColor: '#19c865',
      playVoice: false,
      play_ing:
        'https://lbqnyv2.migugu.com/images/12/2018/11/CRFPPPTKf6f45J6H3N44BNCrjbFZxH.gif',
      play_stop:
        'https://lbqnyv2.migugu.com/images/12/2018/11/IgvvwVNUIVn6UMh4Dmh4m6nM4Widug.png',

      avatar: 'https://lbqny.migugu.com/admin/diy/default.png',
      voice: '1',
      voice_time: 56,
      desc: '您好，这里是我的个人简介',
      tag_list: [
        {
          thumbed: 1,
          tag: '专业',
          count: 39
        },
        {
          thumbed: 0,
          tag: '热情',
          count: 12
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.intro-box {
  margin: 0 16px;
  padding: 0 16px 16px;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}

.point {
  width: 5px;
  height: 5px;
  background: #ff0000;
  border-radius: 50%;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  padding: 0 10px;
  line-height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #dddddd;
  margin-top: 10px;
  margin-right: 10px;
}

.tag-item .iconfont {
  font-size: 15px;
  line-height: 28px;
}
.audio-record-sec {
  width: 192px;
  height: 40px;
  border: 1px solid #dddddd;
  position: relative;
}

.audio-record-sec:after {
  content: '';
  position: absolute;
  left: -6px;
  top: calc(20px - 5px);
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: 1px solid #dddddd;
  border-top: transparent;
  border-right: transparent;
  background: #f4f6f8;
  z-index: 1;
}

.audio-record-sec .play-img {
  width: 20px;
  height: 20px;
}
</style>
